/* ---------- ONC S&I FRAMEWORK MAIN SITE CSS (based on PILOT SITE CSS) ---------- */


body {
	font: 76%/1.25 Arial, Verdana, sans-serif;
	background: #FFF;
	margin: 0;
	padding: 0;
	color: #000;
}


/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4, h5, h6, h7 {
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: bold;	 /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

p  {
	margin-top: 0;
	margin-bottom: 1em;
	padding: 0;
	text-align: left;
	font-weight: normal;
}

h1 {
	color: #497DE3;
	font-size: 1.7em;
	margin-bottom: 0.5em;
	font-weight: normal;
}

h1.testimonials {
	color: #2C569B;
	font-size: 1.7em;
	margin-bottom: 0.5em;
	font-weight: normal;
}


h2 {
  color: #2C569B;
  font-size: 1.35em;
  margin-bottom: 0.2em;
  font-weight: normal;
}

h2.testimonials {
  color: #2C569B;
  font-size: 1.5em;
  margin-bottom: 0.2em;
  font-weight: bold;
}

h3 {
  color: #203763;
  font-size: 1.2em;
}


h4 {
	font-size: 1em;
}

h4.scenarios {
	color: #497DE3;
	font-size: 1em;
	margin-bottom: 1em;
	font-weight: bold;
}

h4.scenario2 {
	font-size: 1.2em;
	font-weight: bold;
}

h5 {
	font-size: 1.2em;
	color: #900;
	margin-bottom: 0.5em;
}

h6 {
	color: #203763;
	font-size: 1.2em;
	text-align: center;
}

/* ~~ Styling for paragraphs used in the testimonials.html page. ~~ */

p.quote {
	color: #203763;
	text-align: left;
	font-size: 1.2em;
	line-height: 1.3em;
	font-style: italic;
	margin-bottom: 5px;
	
}

p.author {
color: #666;
text-align: right;
font-size: 1em;
line-height: 1.3em;
font-weight: bold;
margin-bottom: 40px;
}

a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border: none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color: #6699FF;
	text-decoration: none; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color: #6699FF;
	text-decoration: none;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	color: #666;
	text-decoration: none;

}

/* ~~ Styling for links when you want them to be dark red in color instead of blue definied above~~ */
.red:link, .red:visited {
	color: #900;
	text-decoration: none;
}
.red:hover, red:active, red:focus {
	color: #666;
	text-decoration: none;
}

/* ~~ Styling for links when you want them to be S&I light blue in color instead of blue definied above~~ */
.blue:link, .blue:visited {
	color: #497DE3;
	text-decoration: none;
}
.blue:hover, blue:active, blue:focus {
	color: #666;
	text-decoration: none;
}

/* ~~ Styling for links when you want them to be white in color instead of blue definied above~~ */
.white:link, .white:visited {
	color: #FFFFFF;
	text-decoration: none;
	line-height: 1em;
}
.white:hover, white:active, white:focus {
	color: #666;
	text-decoration: none;
	line-height: 1em;
}

/* ~~ Styling for links when you want them to be white in color instead of blue definied above~~ */
.black:link, .black:visited {
	color: #000000;
	text-decoration: none;
	line-height: 1em;
}


/* ~~ Styling for "download" class icon links on the scenarios.html page~~ */
.download:link, .download:hover, .download:visited, .download:active, .download:focus {
	margin-left: 3px;
	text-decoration: none;
}

/* ~~ Styling for "button_accomplishments" class image links on the accomplishments.html page~~ */
.button_accomplishments:link, .button_accomplishments:hover, .button_accomplishments:visited, .button_accomplishments:active, .button_accomplishments:focus {
	text-decoration: none;
}



/* ~~this fixed width container surrounds the other divs~~ */
.container {
	width: 1007px;
	background: #FFF;
	border: 1px solid #497DE3;
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

.sidepadding15 {
  padding-left: 15px;
  padding-right: 15px;
}

.sidepadding5 {
  padding-left: 5px;
  padding-right: 5px;
}

.toppadding15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
}

/* ~~ Header Navigations - global and local. Header contains 2 navigations: Global (.navglobal) which has links to other parts of the S&I Framework websites like Pilots, Browser and Wiki, and the Local navigation (.nav1) which contains links for just within this local home site. Each navigation has its own styling as definied below. However some styling is the same and definied as follows:   ~~ */
.header div[class^="nav"] {
  text-align: right;
}

.header ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}

.header li, .footer li {
  display: inline-block;
  margin: 0;
  font: 12px Arial, Verdana, sans-serif;
  line-height: 1em;
} 

/* ~~ Global Navigation (appears at the very top) ~~ */
.header .navglobal {
  height: 15px;
} 

.navglobal {
  background: #497DE3;
  color: #A9CCEE;
  padding: 8px 10px;
  vertical-align: middle;
}

.navglobal a, .navglobal a:link, .navglobal a:visited {
  color: #DCEDF5;
  text-decoration: none;
  padding: 0 8px;
}

.navglobal a:hover, .navglobal a:active, .navglobal a:focus {
  text-decoration: underline;
}
/* ~~ End -- Top Level Global Navigation ~~ */

/* ~~ Local Navigation (appears after the banner image) ~~ */
div.nav1 {
  font-size: 1.1em;
  text-align: center;
  padding: 14px 10px;
}

.nav1 ul.nav{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

div.nav1 ul.nav li {
  display: inline-block;
  margin: 0;
}

div.nav1 ul.nav a {
  color: #42413C;
  padding: 0 15px;
}

div.nav1 ul.nav a:link, div.nav1 ul.nav a:visited {
  text-decoration: none;
}

div.nav1 ul.nav a:hover {
  color: #8a8a8a;
}

div.nav1 ul.nav a:active, div.nav1 ul.nav a.active {
  color: #497DE3;
  font-weight: bold;
}
/* ~~ End -- Top Level Global Navigation ~~ */

/* ~~ Banner (.banner) containing the logo on the left and a background image behind it. This banner appears on every page right after the Global Navigation. ~~ */
.banner {
	background: #497DE3 url(../images/header_bkgd.png) repeat-y left top;
    border-bottom: 1px solid #A9CCEE;
	height: 65px;
}

/* ~~ Styling for Logo image inside the .banner ~~ */
.banner img {
  margin: 10px;
}


/* ~~ Image Slider banner (.banner_main) located on the index.html only. It uses plain jpegs of specified sizes and an unordedred list. It is powered by a simple jQuery plugin files for which are located in the "js" folder within the site directory. Specific styling for the slider plugin called "Easy Slider 1.7" can be found at the end of this css file. For full documentation and user guide on this jQuery slider plugin please refer to http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider ~~ */
.banner_main {
	width: 1007px;
	background-color: #FFFFFF;
	background-position: left top;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}


/* --  .middle is a wrapper for .content, basically anything between div.nav1 and .footer --*/
.middle {
  background: url(../images/sblt_bkgd.jpg) repeat-y left top;
  height: 100%;
}



/* ----- CONTENT STYLES ----- */


.content {
	width: 80%; /* 1007 -236 -11 */
	float:left;
	border: 0px none #A9CCEE;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	background-color: #FFF;
}

.leftColumn{
    width:15%;
	height: 375px;
	float:left; 
	padding-top: 10px;
}


/* --  wrappers for the tool selection section --*/

.toolSelectionSection {
    background: #ffffff;
	width: 750px;
	float:left;
}

.tableColumn {
    background: #f0f0f0;
	width: 30%;
	border-color: #ffffff;
	float:left;
}

.toolSelectionInformation { 
    background: #f0f0f0;
	width: 50%;
	border-color: #ffffff;
	float:left;
}

.toolSelectionInformationCell {
    background: #ffffff;
	width: 100%;
	float:left;
	border: 2px solid;
	border-color: #ffffff;
	padding-top: 5px;
	padding-bottom: 5px;
}

.tableCell1 {
	width:100%;
	float:center;
	border: 3px solid;
	border-color: #f0f0f0;
	padding-top: 5px;
	padding-bottom: 5px;
}

.tableCell2 {
	background: #33579e;
	width:93%;
	float:center;
	border: 3px solid;
	border-color: #f0f0f0;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.tableRow {
    background: #f0f0f0;
	width: 50px;
	border: 2px solid;
	border-color: #ffffff;
	float:left;
	padding-top: 5px;
	padding-bottom: 5px;
}

.nosblt {/* this class is used when there is no sidebar on the left and comes from the pilot site css styling. */
	width: 956px;
	text-align: left;
}


/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}

/* ~~ Additional list styles ~~ */
ul li {
	margin-bottom: 0.2em;
	list-style: square;
}

ol li {
	margin-bottom: 0.2em;
	list-style-position: outside;
	margin-left: 40px;
	color: #000;
}

ul, ol {
	margin-top: -0.4em;
}

/* ~~ Partial specific style for numberic list on the initiatives_wiki.html page ~~ */
.int ol {
	margin-top: -1em;
	margin-bottom: 10px;
}

table {
	text-align: left;
	margin: 0;
	padding: 0;
	color: #000;
	border-collapse: collapse;
}

table, 
th, 
td {
	border: none;
}

table tr {
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}


/* ~~ Table in index.html for layout of 3 main areas of content and the large image navigation buttons. ~~ */
.table_index {
	margin-top: 40px;
	padding: 0;
}

.table_index table {
	text-align: left;
	margin: 0;
	padding: 0;
	color: #000;
}

	
.table_index table tr {
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}

.table_index table td {
	padding-left: 2px;
}

.table_index table td th {
	padding: 0;
}


/* ~~ Table in testimonials.html for layout and formating of text. ~~ */

.table_testimonials {
	padding: 0;
	margin-top: 30px;
	
}

.table_testimonials table {
border-collapse: collapse;
padding: 0;
	margin: 0;
	font-size: 1em;
	color: #000;
}

.table_testimonials table, 
.table_testimonials th, 
.table_testimonials td {
border: 1px solid #CCC;
}


.table_testimonials table tr td {
	text-align: left;
	vertical-align: top;
	
}


.table_testimonials tr th {
	font-size: 1.2em;
	color: #666;
	text-align: left;
	background-color: #DCE4EB;
}


/* ~~ Table in any scenario_XXX.html for layout and formating of text. ~~ */

.table_scenario1 {
	margin-left: 10px;
	margin-bottom: 20px;
	margin-top: 0px;
	padding: 0;
}

.table_scenario2 {
	margin-top: 0px;
}

.table_scenario2 table td {
	border-right: 10px solid #FFF;
	border-bottom: 10px solid #FFF;
	padding: 10px;
	color: #FFF;
	text-align: left;
}


.table_scenario2 ul {
	padding: 0;
	margin-left: 15px;
	margin-bottom: -1em;
}

.table_scenario2 ul li {
	list-style-position: outside;
	list-style-image: url(../images/bullet_square.gif);
}


.table_scenario2 table li {
  padding: 0;
  line-height: 1.5em;
  margin-bottom: 1em;
}

.table_scenario2 table td h4 {
	text-align: left;
	font-size: 1.2em;
	font-weight: bold;
	color: #FFF;
	margin: 0;
	padding: 0;
}

.scenario_center {
	padding-top: 0;
	padding-bottom: 0;
}

.scenario_center p {
	text-align: center;
}

/* ~~ Table styling for accomplishments.html. ~~ */
.table_accomplishments table td {
	border-right: 10px solid #FFF;
	border-bottom: 10px solid #FFF;
	text-align: left;
}

/* ~~ Div and its contents styling for MU block in any scenarios pages. ~~ */
.mu {
	padding: 10px;
	margin: 0;
	background-color: #E4ECF5;
	border: solid 2px;
	border-color: #C3D4E6;
	vertical-align: middle;
}

p.mu {
	
	color: #2C569B;
	border: none;
	padding: 0;
	margin: 0;
}


/* ~~ Div in initiatives_wiki.html for layout and spacing of images and text for each initiative. ~~ */
.int p {
	margin-bottom: 25px;
}


/* ~~ Styles for the icon images on the initiatives_wiki.html to give them margins and float them left of the text. ~~ */
.icons {
	height: 60px;
	width: 50px;
	margin-right: 20px;
	float: left;
}

.icons img {
}

.icons_long {
	height: 60px;
	width: 50px;
	margin-right: 15px;
	margin-bottom: 60px;
	float: left;
}

.icons_long img {
	height: 60px;
	width: 50px;
}

/* ~~ Class for centering and padding the image on the framework.htm page ~~ */
.center {
	padding-top: 1em;
	padding-bottom: 1em;
}
.center p {
	text-align: center;
}


/* ~~ The footer ~~ */
.footer {
	padding: 10px;
	background: #497DE3;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

	
	/* Easy Slider from .banner_main */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:1007px;
		height:215px !important;
		overflow:hidden; 
		}	
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{ 
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}	
	#nextBtn, #slider1next{ 
		left:1007px;
		}														
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{  
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;	
		}	
	#nextBtn a, #slider1next a{ 
		background:url(../images/btn_next.gif) no-repeat 0 0;	
		}	
		
	/* numeric controls */	

	ol#controls{
		margin:1em 0;
		padding:0;
		height:10px;
			
		
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:10px;
		width: 10px;
		line-height:10px;
		border-radius:10px;
		}
	ol#controls li a{
	float:left;
	height:10px;
	line-height:10px;
	border:0px solid #999;
	color:#E0E0E1;
	padding:0 10px;
	text-decoration:none;
	border-radius:10px;
	background-color: #E0E0E1;
		}
	ol#controls li.current a{
	background:#A2D8EF;
	color:#A2D8EF;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // End -- Easy Slider */
